<!DOCTYPE html>
<html>
    <head>
        <title>vue lunbo</title>
        <style>

            .arrow{
                position: absolute;
                top: 120px;
                background-color: RGBA(0, 0, 0, .3);
            }
            .left{
                /* position: absolute; */
                left:20px;
            }
            .right{
                /* position: absolute; */
                right:20px;
            }
            #main{
                width: 600px;
                height: 400px;
                position: relative;
                margin: 0 auto;
            }
            
            #content{
                width: 600px;
                height: 400px;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div id="main">
                <img class="arrow left" src="./img/prev.png" @click="prev">
                <img id = "content" :src="images[index]">
                <img class="arrow right" src="./img/next.png" @click="next">
            </div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script> -->
        <script>
            var vm = new Vue({
                el: "#app",
                data(){
                    return {
                        images: [
                            './img/1.jpg',
                            './img/2.jpg',
                            './img/3.jpg',
                            './img/4.jpg',
                            './img/5.jpg',
                        ],
                        index: 0,
                    }
                },
                methods: {
                    prev: function(){
                        if(this.index > 0){
                            this.index--;
                        }
                        else{
                            this.index = this.images.length - 1;
                        }
                        
                    },
                    next: function(){
                        if(this.index < this.images.length - 1){
                            this.index++;
                        }
                        else{
                            this.index = 0;
                        }
                    }
                }
            })
        </script>
    </body>
</html>